<template>
  <div class="orderDetail">
    <div class="topBar">
      <van-nav-bar left-arrow @click-left="$router.back()" fixed>
        <template #title>
          <span class="BarTitle">订单详情</span>
        </template>
      </van-nav-bar>
    </div>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <!-- 餐馆图片、状态、餐馆名、
      菜名、菜品数量、菜价、配送费、实付款、
      送达时间、地址、号码、配送方式、
      订单号、支付方式、下单时间
      -->
      <OrderInfo 
        v-if="orderInfo||orderInfo._doc.status_bar.title"      
        :status="orderInfo._doc.status_bar.title"
        :restaurant_name="orderInfo._doc.restaurant_name"
        :dishgroup="orderInfo._doc.basket.group[0]"
        :deliver_name="orderInfo._doc.basket.deliver_fee.name"
        :deliver_fee="orderInfo._doc.basket.deliver_fee.price"
        :total_amount="orderInfo._doc.total_amount"
        
        :deliver_time="orderInfo.deliver_time"
        :consignee="orderInfo.consignee"
        :phone="orderInfo.phone"
        :id="orderInfo._doc.id"
        :pay_method="orderInfo.pay_method"
        :order_time="orderInfo._doc.formatted_created_at"
        :restaurant_image_url="'https://api.52kfw.cn/img/' + orderInfo._doc.restaurant_image_url"
      ></OrderInfo>
    </van-pull-refresh>
  </div>
</template>

<script>
import OrderInfo from "@/components/order/OrderInfo.vue"
// 按需导入 API 接口
import { getOrderDetailAPI } from "@/api/OrderAPI.js"

export default {
  name: "OrderDetail",
  data() {
    return {
      //用户id
      userId: 6,
      //订单信息
      orderInfo: Object,
      isLoading: true
    }
  },
  created() {
    console.log("0000" + this.$route.params.order_id)
    //this.$route.query.id)
    
    this.initOrderDetail()
  },
  methods: {
    // 封装获取文章列表数据的方法
    async initOrderDetail() {
      // 发起 GET 请求，获取文章的列表数据
      const { data: res } = await getOrderDetailAPI(
        this.userId,
        this.$route.params.order_id
      )
      if(res){
        this.orderInfo = res
      }else{
        console.log("未加载")
      }
      
      console.log("1111" + this.$route.params.order_id)
      //console.log("1111" + this.$route.query.id)
      console.log(this.orderInfo)
    },
    // 下拉刷新的处理函数
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false
        this.initOrderDetail()
      }, 1000)
    }
  },
  components: {
    OrderInfo
  }
}
</script>

<style lang="less">
.orderDetail {
  margin-top: 2.5rem;
  background-color: #f1f1f1;
}
/deep/.BarTitle {
  font-weight: 700;
}
</style>
